<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>体育用品在线商城</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
  <h1>体育用品在线商城</h1>
</div>
<div class="nav">
  <a href="#home">首页</a>
  <a href="#basketball">篮球</a>
  <a href="#football">足球</a>
  <a href="#tennis">网球</a>
  <a href="#fitness">健身</a>
  <div class="search-container">
    <form id="search-form">
      <input type="text" placeholder="搜索商品..." id="search-input">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
</div>

<div class="main" id="products-container">
  <!-- 商品将在这里动态插入 -->
</div>

<div class="footer">
  <p>版权所有 &copy; 2023 体育用品在线商城</p>
</div>

<script src="script.js"></script>
</body>
</html>
